<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">

            <el-form-item label="执行类型" prop="inputCondition">
                <el-select v-model="form.executeType">
                    <el-option
                        v-for="item in executeTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="星期" v-if="form.executeType === '2'">
                <el-radio-group v-model="weekDay" size="small" @change="weekDayChange">
                    <el-radio-button :label="0">一</el-radio-button>
                    <el-radio-button :label="1">二</el-radio-button>
                    <el-radio-button :label="2">三</el-radio-button>
                    <el-radio-button :label="3">四</el-radio-button>
                    <el-radio-button :label="4">五</el-radio-button>
                    <el-radio-button :label="5">六</el-radio-button>
                    <el-radio-button :label="6">日</el-radio-button>
                </el-radio-group>

                <el-button style="margin-left: 20px"
                           icon="el-icon-plus"
                           type="success"
                           size="small"
                           @click="addExecuteTime()"
                />
            </el-form-item>

            <div style="display: flex; flex-wrap: wrap" v-if="form.executeType === '2'">
                <el-form-item v-if="executeTime.length>0" v-for="(item, index) in executeTime" :key="index">
                    <div style="display: flex">
                        <el-time-picker
                            v-model="executeTime[index]"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间"
                        >
                        </el-time-picker>
                        <el-link style="margin-left: 5px" @click="delExecuteTime(index)" type="danger"
                                 :underline="false"
                        >删除
                        </el-link>
                    </div>
                </el-form-item>

                <div v-if="executeTime.length===0">
                    <el-form-item>
                        未设置时间
                    </el-form-item>
                </div>
            </div>

            <!--                        <el-form-item label="时间点" prop="executeTime" v-if="form.executeType === '2'">-->
            <!--                            <el-input v-model="executeTime" placeholder="时间点"/>-->
            <!--                        </el-form-item>-->

            <!--                        <el-form-item label="周期" v-if="form.executeType === '2'">-->
            <!--                            <el-select v-model="selectedTimeList"-->
            <!--                                       placeholder="选择周期"-->
            <!--                                       multiple-->
            <!--                                       @remove-tag="removeTime"-->
            <!--                                       @change="timeChange">-->
            <!--                                <el-option-->
            <!--                                        v-for="item in this.timeList"-->
            <!--                                        :key="item.value"-->
            <!--                                        :label="item.label"-->
            <!--                                        :value="item.value"-->
            <!--                                        @click.native="timeClick(item.value)"-->
            <!--                                />-->
            <!--                            </el-select>-->
            <!--                        </el-form-item>-->

            <!--                        <el-form-item label="时间" v-if="form.executeType === '2'">-->
            <!--                            <el-time-picker-->
            <!--                                    v-model="executeTime"-->
            <!--                                    format="HH:mm"-->
            <!--                                    value-format="HH:mm"-->
            <!--                                    placeholder="选择时间">-->
            <!--                            </el-time-picker>-->
            <!--                        </el-form-item>-->

            <el-form-item label="输入条件" prop="inputCondition">
                <el-select v-model="form.inputCondition">
                    <el-option
                        v-for="item in inputConditionOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

        </el-form>


        <el-form v-if="form.inputCondition !== '0'" :inline="true">

            <el-form-item>
                <el-select v-model="sensorSelectedList"
                           placeholder="信息点"
                           multiple
                           @remove-tag="removeTag"
                >
                    <el-option
                        v-for="item in this.sensorList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native="sensorClick(item.value)"
                    />
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-select v-model="loopSelectedList"
                           placeholder="控制点"
                           multiple
                           @remove-tag="removeLoop"
                >
                    <el-option
                        v-for="item in this.loopList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native="loopClick(item.value)"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button
                    size="small"
                    type="danger"
                    @click="clearInputCondition()"
                >清空
                </el-button>
            </el-form-item>

        </el-form>

        <el-table :data="inputConditionList" v-if="form.inputCondition !== '0'">
            <el-table-column label="名称" align="center" prop="inputEquipmentName"/>
            <!--            <el-table-column label="名称" align="center" prop="equipmentName" show-overflow-tooltip />-->
            <el-table-column label="类型" align="center" prop="inputEquipmentType">
                <template slot-scope="scope">
                    <span v-if="scope.row.inputEquipmentType === '0'">信息点</span>
                    <span v-if="scope.row.inputEquipmentType === '1'">控制点</span>
                </template>
            </el-table-column>
            <el-table-column label="条件" align="center" prop="conditionType">

                <template slot-scope="scope">

                    <el-select v-model="scope.row.conditionType">
                        <el-option
                            v-for="item in conditionTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>

                </template>
            </el-table-column>

            <el-table-column label="数值" align="center" prop="conditionValue">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.conditionValue"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="danger"
                        @click="deleteCondition(scope.row, scope.$index)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import { listSensor } from '@/api/equipment/sensor'
import { listLoop } from '@/api/equipment/loop'

export default {
    name: 'index',
    props: {
        formInput: {
            type: Object,
            default: () => {
            }
        },
        selectSensorList: {
            type: Array,
            default: () => []
        },
        selectLoopList: {
            type: Array,
            default: () => []
        },
        inputList: {
            type: Array,
            default: () => []
        },
        executeTimeProp: {
            type: Array,
            default: () => []
        },
        weekDayExecuteTimeList: {
            type: Array,
            default: () => [
                [], [], [], [], [], [], []
            ]
        },
    },
    data() {
        return {
            // 表单参数
            form: this.formInput,
            // 表单校验
            rules: {},
            lastWeekDay: 0,
            inputConditionList: this.inputList,
            conditionTypeList: [
                { value: '0', label: '等于' },
                { value: '1', label: '不等于' },
                { value: '2', label: '大于' },
                { value: '3', label: '大于等于' },
                { value: '4', label: '小于' },
                { value: '5', label: '小于等于' }
            ],
            executeTypeList: [
                { value: '0', label: '执行一次' },
                { value: '1', label: '连续循环' },
                { value: '2', label: '自定义周期' }
            ],
            inputConditionOption: [
                { value: '0', label: '无条件' },
                { value: '1', label: '同时满足' },
                { value: '2', label: '满足一个以上' }
            ],
            sensorList: [],
            loopList: [],
            sensorSelectedList: this.selectSensorList,
            loopSelectedList: this.selectLoopList,
            // 当前时间
            executeTime: this.executeTimeProp,
            weekDay: 0,
            weekDayExecuteTime: this.weekDayExecuteTimeList
        }
    },
    created() {
        this.selectSensorAndLoop()
    },
    watch: {
        form: {
            handler(newVal, oldVal) {
                let obj ={
                    form:newVal,
                    weekDayExecuteTime:this.weekDayExecuteTime,
                    weekDay:this.weekDay,
                    executeTime:this.executeTime
                }
                this.$emit('updateInputForm', obj)
            },
            deep: true
        },
        weekDayExecuteTime(val){
            let obj ={
                form:this.form,
                weekDayExecuteTime:val,
                weekDay:this.weekDay,
                executeTime:this.executeTime
            }
            this.$emit('updateWeekDayExecuteTime',obj)
        }
    },
    methods: {
        selectSensorAndLoop() {
            this.sensorList = []
            listSensor({}).then(response => {
                // console.log(response)
                for (let item of response.data) {
                    let temp = {}
                    temp['value'] = item.sensorId
                    temp['label'] = item.sensorName
                    temp['equipmentType'] = '0'
                    this.sensorList.push(temp)
                }
            })

            this.loopList = []
            listLoop({}).then(response => {
                for (let item of response.data) {
                    let temp = {}
                    temp['value'] = item.loopId
                    temp['label'] = item.loopName
                    temp['equipmentType'] = '1'
                    this.loopList.push(temp)
                }
            })
        },
        weekDayChange(val) {
            // console.log('val...', val)
            this.weekDayExecuteTime[this.lastWeekDay] = this.executeTime
            this.executeTime = this.weekDayExecuteTime[val]
            this.lastWeekDay = val
        },
        addExecuteTime() {
            let time = '00:00'
            let length = this.executeTime.length
            if (length >= 10) {
                this.$message.info('一天最多添加10个时间点')
                return
            }
            this.executeTime.push(time)
        },
        deleteCondition(row, index) {
            if (row.inputEquipmentType === '0') {
                let index = this.sensorSelectedList.indexOf(row.inputEquipmentId)
                this.sensorSelectedList.splice(index, 1)
            }
            if (row.inputEquipmentType === '1') {
                let index = this.loopSelectedList.indexOf(row.inputEquipmentId)
                this.loopSelectedList.splice(index, 1)
            }
            this.inputConditionList.splice(index, 1)

        },
        removeLoop(value) {

            let obj = this.form.inputConditionList.find((item) => {
                return item.inputEquipmentId === value && item.inputEquipmentType === '1'
            })

            let index = this.form.inputConditionList.indexOf(obj)
            this.form.inputConditionList.splice(index, 1)
        },
        removeTag(value) {

            let obj = this.inputConditionList.find((item) => {
                return item.inputEquipmentId === value && item.inputEquipmentType === '0'
            })

            let index = this.inputConditionList.indexOf(obj)
            this.inputConditionList.splice(index, 1)
        },
        sensorClick(value) {

            let obj = this.sensorList.find((item) => {
                return item.value === value
            })

            let name = obj.label

            let condition = {}
            condition = {
                'inputEquipmentId': value,
                'inputEquipmentName': name,
                'inputEquipmentType': '0',
                'conditionType': null,
                'conditionValue': null
            }

            let obj2 = this.inputConditionList.find((item) => {
                return item.inputEquipmentId === value && item.inputEquipmentType === '0'
            })

            if (obj2 === undefined) {
                this.inputConditionList.push(condition)
            } else {
                let index = this.inputConditionList.indexOf(obj2)
                this.inputConditionList.splice(index, 1)
            }

        },
        loopClick(value) {

            let obj = this.loopList.find((item) => {
                return item.value === value
            })

            let name = obj.label

            let condition = {}
            condition = {
                'inputEquipmentId': value,
                'inputEquipmentName': name,
                'inputEquipmentType': '1',
                'conditionType': null,
                'conditionValue': null
            }

            let obj2 = this.inputConditionList.find((item) => {
                return item.inputEquipmentId === value && item.inputEquipmentType === '1'
            })

            if (obj2 === undefined) {
                this.inputConditionList.push(condition)
            } else {
                let index = this.inputConditionList.indexOf(obj2)
                this.inputConditionList.splice(index, 1)
            }

        },
        clearInputCondition() {
            this.sensorSelectedList = []
            this.loopSelectedList = []
            this.inputConditionList = []
        },
        delExecuteTime(index) {
            this.executeTime.splice(index, 1)
        }
    }
}
</script>

<style scoped>

</style>
